<template>
  <div class="songlistdetails">
    <top />
    <header>
      <div class="left">
        <img :src="playlist.coverImgUrl" />
        <p>
          <van-icon name="play" />{{ parseInt(playlist.playCount / 10000) }}万
        </p>
      </div>
      <div class="right">
        <h4 class="title">{{ playlist.name }}</h4>
        <span v-for="(item, index) in playlist.tags" :key="index">{{
          item
        }}</span>
      </div>
    </header>
    <div class="playlist">
      <div class="playlist_left">
        <van-icon name="play-circle" class="van1" />播放全部
      </div>
      <div class="playlist_right"><van-icon name="certificate" /></div>
    </div>
    <div class="singSong">
      <ul>
        <li
          v-for="(item, index) in Songs"
          :key="index"
          @click="toPlayPages(id, item.id)"
        >
          <div class="num">{{ index + 1 }}</div>
          <img :src="item.al.picUrl" alt="" class="img1" />
          <div class="Img_right">
            <p class="p1">
              {{ item.name }}
            </p>
            <p class="p2">
              <span class="spn1">SQ</span
              ><span>{{ item.ar[0].name }} - {{ item.al.name }}</span>
            </p>
          </div>
          <div class="bofangdian">
            <span><van-icon name="play-circle-o" class="sp1" /></span>
            <span><van-icon name="ellipsis" class="sp2" /></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import top from "../../components/header.vue";
import { setSong } from "../../utils/auth";
export default {
  data() {
    return {
      id: "",
      playlist: {},
      Songs: [],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},

  methods: {
    initSongs(id) {
      axios
        .get("http://192.168.31.27:3000/playlist/track/all?" + this.param, {
          params: {
            id,
          },
        })
        .then((res) => {
          // console.log("获取歌单所有歌曲", res);
          this.Songs = res.data.songs;
          // console.log("获取歌单所有歌曲", this.Songs);
        });
    },
    async getList() {
      this.id = this.$route.params.id;
      // console.log(this.id);
      ///playlist/detail?id=24381616

      const res = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?id=" +
          this.id +
          "&timestamp=" +
          new Date().getTime() +
          "&" +
          this.param,
        {
          withCredentials: true,
        }
      );
      // console.log(res);
      this.playlist = res.data.playlist;
    },
    toPlayPages(listId, songId) {
      const song = {
        listId,
        songId,
      };
      setSong(JSON.stringify(song));
      this.$router.push("/playpage");
    },
  },
  created() {
    const id = this.$route.params.id;
    this.getList();
    this.initSongs(id);
    // this.getTalk();
  },
  mounted() {},
  components: {
    top,
  },
};
</script>
<style scoped>
.songlistdetails {
  margin-bottom: 100px;
}
header {
  position: relative;
  margin-top: 10px;
  padding: 10px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
header .left {
  position: relative;
  float: left;
}
header .left img {
  width: 130px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 20px;
}
header .left p {
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin: 0;
  font-size: 14px;
  color: #000;
  border-radius: 100px;
  background-color: #ccc;
  position: absolute;
  right: 20px;
  top: 20px;
}
header .right {
  width: 180px;
  margin-left: 20px;
  float: left;
}
header .right h4 {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
  height: 90px;
  line-height: 1.3;
  color: darkred;
}
header .right span {
  display: inline-block;
  font-size: 16px;
  color: #0008;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 100px;
}
.singSong li {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #f1f1f1;
}
.singSong .Img_right {
  flex: 1;
  padding: 16px 5px;
}
.Img_right .right_left {
  padding: 8px 0;
}
.singSong .Img_right p {
  margin: 0;
  padding: 0;
  line-height: 20px;
}
.singSong .Img_right .p1 {
  font-size: 17px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singSong .Img_right .p1 span {
  color: #acacac;
  font-size: 13px;
}
.singSong .Img_right .p2 {
  color: #acacac;
  margin-top: 8px;
  font-size: 1px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.singSong .Img_right .p2 .spn1 {
  color: rgb(189, 45, 69);
  font-size: 10px;
  padding: 0px 2px;
  margin-right: 5px;
  border: 0.5px solid rgb(189, 45, 69);
}

.singSong .img1 {
  padding: 5px 10px;
  width: 55px;
  height: 55px;
  border-radius: 15px;
}
/* 播放全部 */
.playlist {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.playlist .playlist_left {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  padding: 0 5px;
}
.playlist .playlist_left .van1 {
  color: #cc5567;
  padding: 0 10px;
  font-size: 22px;
}
.playlist .playlist_right {
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  padding: 0 10px;
}
.num {
  width: 40px;
  line-height: 70px;
  text-align: center;
  font-size: 18px;
  color: #b3b0b0;
}
.bofangdian {
  line-height: 70px;
  padding: 0 10px;
}
.bofangdian .sp1 {
  padding: 0 15px;
  font-size: 20px;
  color: #acacac;
}
.bofangdian .sp2 {
  color: #acacac;
  font-size: 18px;
}
</style>
